<template>
  <Card v-if="viewLoading" :dis-hover="true" :title="$route.meta.title">
    <iForm ref="formRef" :model="formFields" :rules="formRules" :label-width="100">
      <FormItem prop="field" label="字段">
        <i-select v-model="formFields.field" placeholder="请选择字段">
          <i-option v-for="(v, k) in constants['user_wallet_record_fields_name']" :value="k.toString()" :key="k">{{ v }}</i-option>
        </i-select>
      </FormItem>

      <FormItem prop="account" label="账号：">
        <Input v-model="formFields.account" placeholder="账号" @on-change="onChangeFindByAccount"/>
      </FormItem>

      <FormItem prop="accountName" label="名称：">
        <Input v-model="accountName" placeholder="名称" readonly/>
      </FormItem>

      <FormItem prop="amount" label="数量：">
        <Input v-model="formFields.amount" placeholder="数量"/>
      </FormItem>

      <FormItem>
        <Button type="primary" :loading="submitLoading" @click="onSubmit">充值</Button>
      </FormItem>
    </iForm>
  </Card>
</template>

<script>
  import { mapState } from 'vuex';
  import { Button, Card, Form, Input, Message, Option, Select } from 'iview';
  import userApi from '@/api/user/index';
  import userWalletApi from '@/api/user/wallet/index';

  export default {
    components: {
      [Button.name]: Button,
      [Card.name]: Card,
      [Form.name]: Form,
      [Form.Item.name]: Form.Item,
      [Input.name]: Input,
      [Option.name]: Option,
      [Select.name]: Select
    },
    data() {
      return {
        submitLoading: false,
        formRules: {
          field: [
            {type:'string', required: true, message: '请选择字段!', trigger: 'blur'}
          ],
          account: [
            {type:'string', required: true, message: '请输入账号!', trigger: 'blur'},
            {min: 6, message: '请输入不少于6位的账号!', trigger: 'blur'}
          ],
          amount: [
            {type:'string', required: true, message: '请输入数量!', trigger: 'blur'}
          ]
        },
        accountName: '',
        formFields: {
          field: '3',
          account: '',
          amount: ''
        },
        viewLoading: false
      };
    },
    methods: {
      onSubmit() {
        this.submitLoading = true;
        this.$refs.formRef.validate((isValid) => {
          if(isValid) {
            this.submitLoading = false;

            userWalletApi.rechargeByAccount(this.formFields).then((res) => {
              this.submitLoading = false;
              if(res.code !== 0) {
                Message.error(res.msg);
                return false;
              }
              Message.success(res.msg);

              this.$refs.formRef.resetFields();
              this.accountName = '';

              return true;
            });
            return isValid;
          }

          this.submitLoading = false;
          return isValid;
        });
      },
      onChangeFindByAccount() {
        if(this.formFields.account.replace(/[\u0391-\uFFE5]/g, 'aa').length < 6) { return false; }

        if (this.formFields.account !== null && this.formFields.account !== undefined && this.formFields.account !== '') {
          userApi.findFirstByAccount(this.formFields.account).then((data) => {
            if(data.code.toString() !== '0') {
              this.accountName = data.msg;
              return false;
            }

            this.accountName = data.user.name;
            return true;
          })
        }
      },
    },
    computed: mapState({
      constants: state => state.constants.constants
    }),
    created() {
      this.$store.dispatch('constants/find').then((res) => {
        this.viewLoading = true;
        if(res.code != 0) {
          Message.error(res.msg);
          return false;
        }
      }).catch((err) => {
        console.log(err);
        this.viewLoading = true;
      });
    }
  }
</script>
